<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现页面通信</title>
  </head>
  <body>
    <h1>
       产品详情页面
    </h1>
    <hr>
    <div id="detail">
       
    </div>
    <script>
      function $ajax(method, url, async, param, CBsucceed, CBreject) {
        // 处理参数为 queryString 形式
        let cs = "";
        for (let i in param) {
          cs += `${i}=${param[i]}&`;
        }

        // 创建ajax核心对象
        const xhr = new XMLHttpRequest();

        // 判断请求方式 --- 采用不同的方式 建立与服务器连接
        if (method === "get") {
          // 建立与服务器连接
          xhr.open(method, url + "?" + cs, async);
        } else {
          // 建立与服务器连接
          xhr.open(method, url, async);
        }

        // 监听ajax状态
        // 成功时
        xhr.onload = function () {
          if (xhr.status === 200) {
            let res = JSON.parse(xhr.responseText);

            // 调用成功的回调
            CBsucceed(res);
          }
        };

        // 失败时
        xhr.onerror = function () {
          // 调用失败的回调
          // 如果 CBreject 是一个函数 就 调用
          // 如果 CBreject 是一个不是函数undefined就 不调用
          CBreject && CBreject();
        };

        // 判断请求方式 --- 采用不同的方式 将请求发送到服务器
        if (method === "get") {
          // 将请求发送到服务器
          xhr.send(null);
        } else {
          // 设置请求头
          xhr.setRequestHeader("content-type", "application/json");

          // 将请求发送到服务器 --- json格式
          xhr.send(JSON.stringify(param));
        }
      }
    </script>
    <script>
      let t = localStorage.getItem("pid");
         $ajax("get","http://chst.vip:1234/api/getmoneyctrlproduct",true,{productid:t},(res)=>{
              console.log(res.result[0].productInfo1);
               detail.innerHTML = `<H3>${res.result[0].productName}</H3>`
             
         })
    </script>
  </body>
</html>
